<template>
  <div class="taskDetailVue">
    <div class="detailTitle clearfix"><span class="detailTitle_text">{{$t('myAdd.candyTask.rewardDetail')}}</span><span class="back pointer" @click="goBack">< {{$t('myAdd.candyTask.goBack')}}</span></div>
    <div class="main">
      <table>
        <thead>
          <tr>
            <th class="time">{{$t('myAdd.candyTask.time')}}</th>
            <th class="task">{{$t('myAdd.candyTask.task')}}</th>
            <th class="reward">{{$t('myAdd.candyTask.reward')}}</th>
            <th class="prostate">{{$t('myAdd.candyTask.status')}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) of showArrPage" :key="index">
            <td class="time">
              {{item.ftime}}
            </td>
            <td class="task">{{item.title}}</td>
            <td class="reward">{{item.countCoin}}</td>
            <td class="prostate">{{item.status === 0? $t('myAdd.candyTask.received'): item.status === 1? $t('myAdd.candyTask.toReceive'): $t('myAdd.candyTask.expired')}}</td>
          </tr>
        </tbody>
      </table>
      <!-- 分页 -->
      <VPagination v-if="(candyRewardPage.count/candyRewardPage.pageSize) > 1"
                   :total="candyRewardPage.count"
                   :current-page='candyRewardPage.page'
                   :display='candyRewardPage.pageSize'
                   @pagechange="candyRewardPageChange($event)" class="page">
      </VPagination>
      <!-- 等待加载 -->
      <div class="loadWait" v-show="showLoad"><loadModel></loadModel></div>
      <noData v-show="!showArrLeng"></noData>
    </div>
  </div>
</template>

<script>
import loadModel from '@/components/common/loadingModel'
import noData from '../common/noData'
import VPagination from '@/components/common/pagination'
export default {
  name: 'candyReward',
  props: ['showArr'],
  components: {
    loadModel,
    noData,
    VPagination
  },
  data () {
    return {
      showLoad: true,
      candyRewardPage: {
        count: 0,
        pageSize: 10,
        page: 1
      }
    }
  },
  mounted () {},
  watch: {
    'showArr' (val) {
      if (val.length) {
        this.showLoad = false
        val.forEach(item => {
          this.candyRewardPage.count += item.length
        })
      } else {
        this.showLoad = true
      }
    }
  },
  computed: {
    showArrLeng () {
      return this.showArr.length
    },
    showArrPage () {
      return this.showArr[this.candyRewardPage.page - 1]
    }
  },
  methods: {
    // 返回上一级
    goBack () {
      this.$emit('hideTaskDetail')
    },
    candyRewardPageChange (page) {
      this.candyRewardPage.page = page
    }
  }
}
</script>

